<template>
  <div class="container mx-auto p-4">
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-bold text-gray-800">{{ t('电池护照') }}</h1>
      <div>
        <el-button type="primary" @click="goToCreate">
          <i class="el-icon-plus mr-1"></i>{{ t('手动录入') }}
        </el-button>
        <el-button type="primary" @click="goToCreate">
          <i class="el-icon-plus mr-1"></i>{{ t('Excel导入') }}
        </el-button>
        <el-button type="primary" @click="goToCreate">
          <i class="el-icon-plus mr-1"></i>{{ t('API导入') }}
        </el-button>
        <el-button type="primary" @click="goToCreate">
          <i class="el-icon-plus mr-1"></i> {{ t('导出') }}
        </el-button>
      </div>
    </div>

    <div class="grid grid-cols-4 gap-4 p-4">
      <el-input v-model="queryParams.batteryPassportIdentifier" :placeholder="t('电池护照标识')"></el-input>
      <el-select v-model="queryParams.batteryCategory" clearable :placeholder="t('电池类别')">
        <el-option v-for="(item,index) in BatteryCategory" :key=index :label="item.label"
                   :value="item.value"></el-option>
      </el-select>

      <el-select v-model="queryParams.documentStatus" clearable :placeholder="t('电池状态')">
        <el-option v-for="(item, index) in document_status" :key="index" :label="item.label"
                   :value="item.value"></el-option>
      </el-select>

      <div>
        <el-button type="primary" @click="handleSearch">{{ t('搜索') }}</el-button>
        <el-button @click="resetSearch">{{ t('重置') }}</el-button>
      </div>
    </div>

    <el-table v-loading="loading" :data="tableData" class="w-full">
      <el-table-column :label="t('电池护照标识')" prop="batteryPassportIdentifier" show-overflow-tooltip width="300">
        <template #default="{row}">
          {{ row.generalInfo.batteryPassportIdentifier }}
        </template>
      </el-table-column>
      <el-table-column :label="t('电池型号')">
        <template #default="{row}">
        </template>
      </el-table-column>
      <el-table-column :label="t('状态')" prop="documentStatus">
        <template #default="{row}">
          <el-tag :type="getStyleByValue(StatusType, row.documentStatus)">
            {{ getLabelByValue(StatusType, row.documentStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="t('标签')">
        <template #default="{row}">

        </template>
      </el-table-column>
      <el-table-column :label="t('电池类别')">
        <template #default="{row}">
          <el-tag :type="getStyleByValue(BatteryCategory, row.generalInfo.batteryCategory)">
            {{ getLabelByValue(BatteryCategory, row.generalInfo.batteryCategory) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="t('创建时间')" prop="createdAt">
        <template #default="{row}">
          {{ formatDate(row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" :label="t('操作')" width="140">
        <template #default="{row}">
          <el-button size="small" @click="handleView(row.id)">{{ t('查看') }}</el-button>
          <el-button size="small" type="primary" @click="handleEdit(row.id)">{{ t('编辑') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-end mt-4">
      <el-pagination
          :current-page="pagination.current"
          :page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import batteryPassportApi from '@/api/batteryPassport'
import {formatDate} from '@/utils/date'
import {BatteryCategory, document_status, StatusType} from "@/api/_const.js";
import {batteryPassportCreate, batteryPassportDetail, batteryPassportEdit} from "@/router/index.js";
import {getLabelByValue, getStyleByValue} from "@/utils/utils.js";
import {useI18n} from "vue-i18n";

const {t} = useI18n()

const router = useRouter()
const loading = ref(false)
const tableData = ref([])
const dateRange = ref([])

const pagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

const queryParams = reactive({
  batteryCategory: '',
  batteryPassportIdentifier: '',
  documentStatus: '',
  batteryStatus: '',
  manufactureStart: '',
  manufactureEnd: '',
  minWeight: null,
  maxWeight: null
})

const fetchData = async () => {
  loading.value = true
  try {
    const params = {
      current: pagination.current,
      size: pagination.size,
      ...queryParams
    }
    const res = await batteryPassportApi.getBatteryPassports(params)
    if (res.code === 200) {
      tableData.value = [...res.data.records]
      pagination.total = res.data.total
    }
  } catch (error) {
    console.error(t('获取电池护照列表失败:'), error)
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.current = 1
  fetchData()
}

const resetSearch = () => {
  Object.keys(queryParams).forEach(key => {
    queryParams[key] = ''
  })
  dateRange.value = []
  handleSearch()
}

const handleSizeChange = (val) => {
  pagination.size = val
  fetchData()
}

const handleCurrentChange = (val) => {
  pagination.current = val
  fetchData()
}

const handleView = (id) => {
  router.push({
    name: batteryPassportDetail,
    params: {
      id: id  // 参数名需与路由配置中的 :id 匹配
    }
  })
}

const handleEdit = (id) => {
  router.push({
    name: batteryPassportEdit,
    params: {
      id: id  // 参数名需与路由配置中的 :id 匹配
    }
  })
}

const goToCreate = () => {
  router.push({name: batteryPassportCreate})
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
/* 可以添加一些自定义样式 */
</style>